<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link th:href="@{/ajax/libs/fullcalendar/fullcalendar.css}" rel="stylesheet"/>
<link th:href="@{/ajax/libs/fullcalendar/fullcalendar.print.css}" rel="stylesheet"/>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <a class="btn btn-success" style="padding: 5px;" onclick="addDayManage()" shiro:hasPermission="oa:daymanage:add">
                    <i class="fa fa-plus"></i> 添加日程
                </a>
            </div>
            <div class="ibox-content">
                <div id="calendar"></div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="myModal" tabindex="-1">
        <!--第二步，窗口声明-->
        <div class="modal-dialog modal-lg">
            <!--第三步、内容区的声明-->
            <div class="modal-content" style="background: #F9F9F9; padding: 10px;">
                <button class="close" data-dismiss="modal" style="display: block; background-color: black; margin: -28px -23px 0 0; border-radius: 60%;">
				<span class="glyphicon glyphicon-remove-circle"
                      style="color: white; font-size: 30px;"></span>
                </button>
                <div style="background-color: #ECF0F5; padding: 10px;">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="box">
                                <div class="box-header">
                                    <h3 class="box-title">
                                        <a class="label label-primary" href=""><span
                                                class="glyphicon glyphicon-print"></span> 打印</a>
                                    </h3>
                                </div>
                                <div class="box-body">
                                    <div style="border-bottom: 1px solid #f4f4f4;">
                                        <h3>
                                            <span class="dayTitle" style="font-size:16px;">标题</span>
                                        </h3>
                                        <h5 style="color: #999;font-size: 13px;">
                                            <span>发布：<span class="dayUserName">admin</span>   类型：<span class="dayType">日程提醒</span></span>
                                            <span style="float:right;"><span class="dayStartTime">2018-10-20 20:44</span> 至 <span class="dayEndTime">2018-10-20 21:44</span></span>
                                        </h5>
                                    </div>
                                    <div style="padding:10px;">
									<span class="dayDescription">
										这就是一个描述
									</span>
                                    </div>
                                </div>
                                <div class="box-footer">
                                    <input class="modelokclose btn btn-primary" type="button" value="确定" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div th:include="include::footer"></div>
    <script th:src="@{/js/jquery-ui.custom.min.js}"></script>
    <script th:src="@{/ajax/libs/fullcalendar/fullcalendar.min.js}"></script>
    <script th:inline="javascript">
        var prefix = ctx + "oa/daymanage";

        $(function () {
            $("#calendar").fullCalendar({
                header: {
                    left: "prev,next today",
                    center: "title",
                    right: "month,agendaWeek,agendaDay"
                },
                editable: false,
                eventClick: function(event) {
                    // 显示日程详细信息
                  /*  var url = prefix + "/edit/"+event.id;
                    $.modal.open(event.title,url);*/
                    var starttime = dateformat(event.start);
                    var endtime = dateformat(event.end);
                    var daytype = event.daytype;
                    var typeName='日程提醒';
                    if(daytype=='2'){
                        typeName='假日安排';
                    }
                    $('#myModal .dayTitle').html(event.title);
                    $('#myModal .dayUsername').html(event.user);
                    $('#myModal .dayType').html(typeName);
                    $('#myModal .dayStartTime').html(starttime);
                    $('#myModal .dayEndTime').html(endtime);
                    $('#myModal .dayDescription').html(event.des);

                    $('#myModal').modal('show');

                },
                events: function (start, end, callback) {
                    $.getJSON(prefix+'/mycalendarload', function (data) {
                        var events = [];
                        $.each(data,function (index,item) {
                            var color;
                            var starttime = item.startTime;
                            var endtime = item.endTime;
                            switch (item.status) {
                                case "1":
                                    color="#00c0ef";
                                    break;
                                case "2":
                                    color="#f0ad4e";
                                    break;
                                case "3":
                                    color="#dd4b39";
                                    break;
                            }
                            events.push({
                                title: item.dayTitle,
                                start: starttime,
                                color: color,
                                end: endtime,
                                id:item.dayId,
                                user:item.createBy,
                                des:item.remark,
                                daytype:item.dayType
                            });
                            callback(events);
                        })
                    });
                }
            })
        });

        $(".modelokclose").click(function(){
            $('#myModal').modal('hide');
        });
       var addDayManage = function() {
            $.modal.openFull("添加一条日程", prefix + "/add");
        }
        var dateformat = function(a) {
            return a.getFullYear() + "-" + (a.getMonth() + 1) + "-" + a.getDate() + " " + a.getHours() + ":" + a.getMinutes() + ":" + a.getSeconds();
        };
    </script>
</body>
</html>
